// import { lazy } from "react";
// import { Outlet } from "react-router-dom";

import { useRoutes } from "react-router-dom"; // 引入 useRoutes
import Home from "@/pages/Home/index";
import ColorSchemeChart from "@/pages/ColorSchemeChart/index";
import Collision from "@/pages/Collision/index";
import Map3D from "@/pages/Map3D/index";
import TailwindCSS from "@/pages/TailwindCSS/index";
import DissolveEffect from "@/pages/DissolveEffect/index";
import CalcHypotenuse from "@/pages/CalcHypotenuse/index";

export interface RouteType {
  path: string;
  element: React.ReactNode;
  children?: Array<RouteType>;
}

const routes: Array<RouteType> = [
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/colorSchemeChart",
    element: <ColorSchemeChart />,
  },
  {
    path: "/collision",
    element: <Collision />,
  },
  {
    path: "/3dMap",
    element: <Map3D />,
  },
  {
    path: "/dissolveEffect",
    element: <DissolveEffect />,
  },
  {
    path: "/tailwindcss",
    element: <TailwindCSS />,
  },
  {
    path: "/calcHypotenuse",
    element: <CalcHypotenuse />,
  },
];

const WrappedRoutes = () => {
  return useRoutes(routes);
};

export default WrappedRoutes;
